import React from 'react';
import {Link, Route, Switch, Redirect} from 'dva/router';
import {Layout, Menu, Button, Popover, Carousel} from 'antd';
import copy from 'copy-to-clipboard';
import { enquireScreen, unenquireScreen } from 'enquire-js';

import MainPage from '../pages/MainPage';
import HeavyCargo from '../pages/HeavyCargo';
import SalesNetwork from '../pages/SalesNetwork';
import ShowCars from '../pages/ShowCars';


const { Content } = Layout;

let isMobile;
enquireScreen(b => {
  isMobile = b;
});

const content = (
  <div>
    <p>电话1：15195608089</p>
    <p>电话2：15050476211</p>
    <p>微信: lilong903818556</p>
    <p>QQ: 903818556</p>
    <p>邮箱：903818556@QQ.com</p>
    <p>网址：http://www.szjmt903818556.cn</p>
  </div>
);


export default class BasicLayout extends React.Component {

  state = {
    isMobile,
  };

  componentDidMount() {
    this.enquireHandler = enquireScreen(mobile => {
      this.setState({
        isMobile: mobile,
      });
    });
  }

  componentWillUnmount() {
    unenquireScreen(this.enquireHandler);
  }

  handleWechat = e =>{
    let clipBoardContent='http://www.szjmt903818556.cn';
    copy(clipBoardContent);
  }

  render(){
    return (
      <Layout className="layout">
        <Carousel autoplay className={isMobile ? "carouselM":"carousel"}>
          <div ><h3  className={"carousel1"}>&nbsp; </h3></div>
          <div ><h3 className={"carousel2"}>&nbsp; </h3></div>
          <div ><h3 className={"carousel3"}>&nbsp; </h3></div>
        </Carousel>

        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['1']}
          style={{ lineHeight: '32px' }}
        >
          <Menu.Item key="1"><Link to={"/MainPage"}/>首页</Menu.Item>
          <Menu.Item key="4"><Link to={"/SalesNetwork"}/>营销网络</Menu.Item>
          <Menu.Item key="5"><Link to={"/HeavyCargo"}/>线上下单</Menu.Item>
          <Menu.Item key="3"><Link to={"/ShowCars"}/>车辆监控</Menu.Item>
        </Menu>

        <Content style={{ padding: '0 5px' }}>
          <div style={{ background: '#fff', padding: 12, height: '780px', overflowY: 'scroll' }}>
            <Switch>
              <Route path="/MainPage" component={MainPage}/>
              <Route path="/ShowCars" component={ShowCars}/>
              <Route path="/SalesNetwork" component={SalesNetwork}/>
              <Route path="/HeavyCargo" component={HeavyCargo}/>
              <Redirect exact from="/" to="/MainPage" />
            </Switch>
          </div>
          <div className={"mlztx"}>
            <Popover content={content} title="联系我们" trigger="click">
              <Button type="primary" shape="circle" icon="phone" size="large" ref="bt"></Button>
            </Popover>
          </div>

          <div  className={"fx"}>
            <Popover content={<p>网址已复制，快去粘贴吧！</p>} title="网址分享" trigger="click">
              <Button type="primary" shape="circle" icon="wechat" size="large" onClick={this.handleWechat}></Button>
            </Popover>
          </div>
        </Content>
      </Layout>
    );
  }

}
